<template>
	<div>

		<div>
			<el-form :inline="true" class="demo-form-inline">
				<el-button type="primary" @click="openDialog('addUserDialog')" v-if="roleActionInfoList.userListMenu.user_add_action">添加用户</el-button>
			</el-form>
		</div>

		<div>
			<el-table :data="dataList.userTableList">
		      <el-table-column type="index" width="50"></el-table-column>
		      <el-table-column prop="account_name" label="用户名" width="80"></el-table-column>
		      <el-table-column prop="user_name" label="用户" width="120"></el-table-column>
		      <el-table-column  label="角色" width="150">
		      	<template scope="scope">
		      		{{dataList.roleList[scope.row.role_id].name}}
		      	</template>
		      </el-table-column>
		      <el-table-column label="操作">
			      <template scope="scope">
			        <el-button size="small" type="info" @click="editRow(scope.$index, scope.row,'editUserDialog')" v-if="roleActionInfoList.userListMenu.user_role_edit_action">信息修改</el-button>

			        <el-button size="small" type="info" @click="editRow(scope.$index, scope.row,'resetUserPwdDialog')">重置密码</el-button>

			        <el-button size="small" type="danger" icon="delete" @click="editRow(scope.$index, scope.row,'delUserDialog')" v-if="roleActionInfoList.userListMenu.user_del_action"></el-button>
			          
			      </template>
			    </el-table-column>

		    </el-table>
		</div>


		<!-- 用户角色修改 -->
		<el-dialog title="用户角色修改" :visible.sync="dialog.editUserDialog.open" v-if="dialog.editUserDialog.open">
			<editUserDialog @closeDialog="closeDialog('editUserDialog')" :roleList="dataList.roleList" @freshList="getUserList" :userId="form.editUserDialog.userId"></editUserDialog>
		</el-dialog>

		<!-- 用户删除 -->
		<el-dialog title="删除提示" :visible.sync="dialog.delUserDialog.open" size="tiny">
		  <span>确定要删除此数据吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('delUserDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogBtnOk('delUserDialog')">确 定</el-button>
		  </span>
		</el-dialog>

		<!-- 用户添加 -->
		<el-dialog title="添加用户" :visible.sync="dialog.addUserDialog.open" v-if="dialog.addUserDialog.open">
			<addUserDialog @closeDialog="closeDialog('addUserDialog')" :roleList="dataList.roleList" @freshList="getUserList"></addUserDialog>
		</el-dialog>
		
		<!-- 密码重置 -->
		<el-dialog title="密码重置" :visible.sync="dialog.resetUserPwdDialog.open" v-if="dialog.resetUserPwdDialog.open">
			<el-form :model="form.resetUserPwdInfo" :rules="rules.resetUserPwdInfo" ref="form.resetUserPwdInfo">
				<el-form-item label="用户名" :label-width="formLabelWidth" prop="account_name">
			      <el-input v-model="form.resetUserPwdInfo.account_name" :label-width="formLabelWidth" :disabled="true"></el-input>
				</el-form-item>
				
				<el-form-item label="密码" :label-width="formLabelWidth" prop="account_pwd">
			      <el-input v-model="form.resetUserPwdInfo.account_pwd" :label-width="formLabelWidth" class="pwd_input" :disabled="true"></el-input>
			      <el-button type="primary" @click="randPwd">随机生成</el-button>
				</el-form-item>
			</el-form>
			
			<div slot="footer" class="dialog-footer">
			    <el-button @click="closeDialog('resetUserPwdDialog')">取 消</el-button>
			    <el-button type="primary" @click="dialogBtnOk('resetUserPwdDialog')">确 定</el-button>
			  </div>
		</el-dialog>



	</div>
</template>
<script>
import _roleAction from '../common/roleAction.vue'
import _http from '../common/http.vue'
import addUserDialog from './addUserDialog.vue'
import editUserDialog from './editUserDialog.vue'

export default{
	components:{addUserDialog,editUserDialog},
	data(){
		return {
        	roleActionInfoList:_roleAction.getRoleActionFlag(this,'userListMenu'),
			dataList:{
				userTableList:[],
				roleList:[]

			},
			
			dialog:{
				addUserDialog:{
					open:false
				},
				delUserDialog:{
					open:false
				},
				editUserDialog:{
					open:false
				},
				resetUserPwdDialog:{
					open:false
				}
			},
			form:{
				delUserFormInfo:{
					userId:0
				},
				editUserDialog:{
					userId:0,
				},
				resetUserPwdInfo:{
					userId:0,
					account_name:'',
					account_pwd:''
				}
			},
			rules:{
				resetUserPwdInfo:{
					account_pwd:[
						{required:true,message:'请生成密码'}
					]
				}
			},

			formLabelWidth:'120px',
			
		}
	},
	mounted(){
		this.getRoleList()
	},
	methods:{
		randPwd(){
			var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
			var n = 8, s = "";
			for(var i = 0; i < n; i++){
			    var rand = Math.floor(Math.random() * str.length);
			    s += str.charAt(rand);
			}
			this.form.resetUserPwdInfo.account_pwd = s
		},
		closeDialog(dialog){
			this.dialog[dialog].open = false
		},
		openDialog(dialog){
			this.dialog[dialog].open= true
		},
		getUserList(){
			_http.axiosRequest(this,'userList',{},(res)=>{
				this.dataList.userTableList = res.data
			})
		},
		getRoleList(){
			_http.axiosRequest(this,'roleList',{type:'select'},(res)=>{
				this.dataList.roleList = res.data
				this.getUserList()
			})
		},
		editRow(index,row,dialog){
			if (dialog == 'delUserDialog') {
				this.form.delUserFormInfo.userId = row.id
			}else if(dialog == 'editUserDialog'){
				this.form.editUserDialog.userId = row.id
			}else if(dialog == 'resetUserPwdDialog'){
				this.form.resetUserPwdInfo.account_name = row.account_name
				this.form.resetUserPwdInfo.userId = row.id
				this.form.resetUserPwdInfo.account_pwd = ''
			}
			this.openDialog(dialog)
		},
		dialogBtnOk(dialog){
			if (dialog == 'delUserDialog') {
				this.delUser(dialog)
			}else if(dialog == 'resetUserPwdDialog'){
				this.resetUserPwd(dialog)
			}
		},
		delUser(dialog){
			_http.axiosRequest(this,'delUser',{id:this.form.delUserFormInfo.userId},(res)=>{
				if (_http.apiResult(this,res.data)) {
					this.getUserList()
					this.closeDialog(dialog)
				}
			})
		},
		resetUserPwd(dialog){
			_http.formValidate(this,'form.resetUserPwdInfo',(valid)=>{
				if (!valid) {return false}
				
				_http.axiosRequest(this,'resetUserPwd',{form:this.form.resetUserPwdInfo},(res)=>{
					if(_http.apiResult(this,res.data)){
						this.closeDialog(dialog)
					}
				})

			})
		}	
	}
}
</script>

<style>
.dialog-footer{
	text-align: center;
}
.pwd_input{
	width:200px;
	display: inline-block;
}	
</style>